<template>
	<view class="Purchase-course">
		
		<custom-navbar :title="pageTitle" :statusBarHeight="statusBarHeight" :navBarHeight="navBarHeight"
			:windowWidth="windowWidth" :color="color" :backgroundColor="backgroundColor"></custom-navbar>
		<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）-->
		<swiperVidio :videoSrc="query.video" :image_list="query.image_list"></swiperVidio>
		<!-- <u-swiper :list="query.image_list" height="550" mode="number" indicator-pos="bottomRight"></u-swiper> -->
		<view class="main_box">
			<view class="introduce">
				<view class="left">
					<view class="left_top">
						<view class="name">
							{{query.title}}
						</view>
						<view class="two_left" v-if="query.course_form !== 'bag'">
							<view class="size1" v-if="query.time_str">
								{{query.time_str}}
							</view>
							<image :src="$IMG_URL('/static/tabbar/what.png')" mode="aspectFill" class="what" @click="openTimeShow" v-if="query.is_time">
							</image>
						</view>

					</view>
					<view class="left_bottom">
						<view v-for="(item,index) in query.label_list" :key="index" class="Item">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="right">
					<view class="right_top">
						<text class="size1 color1">￥</text>
						<text class="size2 color1">{{query.price}}</text>
						<text class="size3 color1">/{{query.unit}}</text>
					</view>
					<view class="right_bottom" v-if="query.cost">
						￥{{query.cost}}/{{query.unit}}
					</view>
				</view>
			</view>
			<boxComponent :title="'教练'" v-if="JSON.stringify(query.coach_info) !== '{}'">
				<item :query="query.coach_info"></item>
			</boxComponent>
			<site :siteList="query.shop_list" :title="'服务场地'"></site>
			<boxComponent :title="'课程内容'">
				<view class="content">
					{{query.content}}
				</view>
			</boxComponent>
			<boxComponent :title="'适合人群'">
				<view class="content">
					{{query.crowd}}
				</view>
			</boxComponent>
			<boxComponent :title="'课程规则'" @custom="">
				<view class="content">
					<u-parse :html="query.regulation_info.content"></u-parse>
				</view>
			</boxComponent>
			<boxComponent :title="'约课流程'">
				<view class="class_row">
					<view v-for="(item,index) in query.flow_list" :key="index" class="item">
						<image :src="item.image" mode="aspectFill" class="img"></image>
						<view class="title">
							{{item.title}}
						</view>
						<view class="size">
							{{item.intro}}
						</view>
					</view>
				</view>
				<!-- <view class="row_img" @click="$PREVIEW_IMAGE($IMG_URL('/static/shop/flow.png'))">
					<image :src="$IMG_URL('/static/shop/flow.png')" mode="" class="flow"></image>
				</view> -->
			</boxComponent>
			<boxComponent :title="'评价'" :rightNav="'全部评价(' +query.eva_num + '条)'" @custom="routeEvaluate">
				<view class="comlumn_box">
					<view v-for="(item,index) in query.eva_list" :key="index" class="Item">
						<evaluateVue :query="item"></evaluateVue>
					</view>
				</view>
			</boxComponent>
		</view>
		<view class="empty">
			
		</view>
		<view class="on_foot-box" @click="shop">
			<view class="btn">
				立即购买
			</view>
		</view>
		<PageLoader :show="isLoading" text="数据加载中" />
		<popup :popupShow="timeShow" :popTitle="'期限说明'" :content="'自购买之日起计算'" :btnSize="'我知道了'"
			@openOff="timeShow = false"></popup>
	</view>
</template>

<script>
	import CustomNavbar from '@/components/navbar/navbar.vue';
	import site from '@/components/site.vue';
	import item from '@/components/coachItem.vue';
	import evaluateVue from '@/components/evaluate.vue';
	import swiperVidio from '@/components/swiperVideo.vue'
	import popup from './/components/pop-up.vue'
	import PageLoader from '@/components/PageLoader.vue'
	import {
		courseDeadil
	} from '@/api/coach.js'
	export default {
		components: {
			CustomNavbar,
			site,
			item,
			evaluateVue,
			swiperVidio,
			popup,
			PageLoader
		},
		data() {
			return {
				isLoading:false,
				timeShow: false,
				from: {},
				cardCur: 0,
				// 自定义导航栏
				color: '#ffffff',
				backgroundColor: 'transparent',
				statusBarHeight: 20,
				navBarHeight: 45,
				windowWidth: 375,
				pageTitle: '',
				// banner
				query: {

					site: [],
					evaluate: []
				}
			}
		},
		methods: {
			routeEvaluate(){
				uni.navigateTo({
					url:'evaluate?course=' + this.from.course + '&form=' + 'course'
				})
			},
			openTimeShow() {
				this.timeShow = true
			},
			shop() {
				uni.navigateTo({
					url:'/pageA/shop/coach/purchase?course=' + this.from.course
				})
			},
			getcourseDeadil() {
				this.isLoading = true
				this.backgroundColor = '#ffffff',
				this.color = '#000000'
				courseDeadil(this.from).then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						this.isLoading = false
						this.backgroundColor = 'transparent',
						this.color = '#ffffff'
						this.query = res.data
						this.$u.mpShare = {
							title: this.query.title, // 默认为小程序名称，可自定义
							path: '/pageA/course/detail?course=' + this.from.course, // 默认为当前页面路径，一般无需修改，QQ小程序不支持
							imageUrl: this.query.image_list[0], 
						}
					}else{
						this.isLoading = false
						this.$SHOWMODALMSG('', res)
					}
				}).catch((err) => {
					this.isLoading = false
					console.error('数据加载失败:', err)
				})
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
		},
		onLoad(e) {
			console.log('e', e);
			this.$u.mpShare = {
				path: '/pageA/course/detail?course=' + e.param, 
			}
			this.from = e
			
		},
		onShow() {
			this.getcourseDeadil()
		},
		onPageScroll(e) {
			console.log(e.scrollTop);
			if (e.scrollTop >= 100 || this.isLoading == true) {
				this.backgroundColor = '#ffffff',
					this.color = '#000000'
			} else {
				this.backgroundColor = 'transparent',
					this.color = '#ffffff'
			}
		},
		created() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			// 除了h5 app mp-alipay的情况下执行
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取胶囊的位置
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			console.log(menuButtonInfo);
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
				.statusBarHeight)
			this.windowWidth = menuButtonInfo.left
			// #endif
		}
	}
</script>

<style lang="scss" >
	.Purchase-course {
		display: flex;
		flex-direction: column;

		.main_box {
			width: 750rpx;
			margin-top: -22rpx;
			background: #e9e9e9;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			overflow: hidden;
			z-index: 10;
			overflow: hidden;


			// padding: 34rpx 24rpx;
			.introduce {
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				background: linear-gradient(180deg, #ffffff, #e9e9e9);
				border-radius: 32rpx 32rpx 0rpx 0rpx;
				padding: 34rpx 24rpx 30rpx;

				.left {
					display: flex;
					flex-direction: column;
					flex: 1;

					.left_top {
						display: flex;
						flex-direction: row;
						align-items: baseline;

						.name {
							font-size: 36rpx;
							font-family: PingFang SC, PingFang SC-Bold;
							font-weight: 700;
							text-align: left;
							color: #333333;
							margin-right: 16rpx;
						}

						.size1 {
							display: flex;
							flex-direction: row;
							align-items: center;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: left;
							color: #999999;
						}

						.what {
							width: 24rpx;
							height: 24rpx;
							margin-left: 5rpx;
						}

						.two_left {
							display: flex;
							flex-direction: row;
							align-items: center;
						}
					}

					.left_bottom {
						margin-top: 6rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						flex-wrap: wrap;

						.Item {
							padding: 0 8rpx;
							height: 38rpx;
							background: #f6f6f6;
							border-radius: 4rpx;
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Medium;
							font-weight: 500;
							text-align: left;
							color: #666666;
							margin-right: 8rpx;
							margin-bottom: 8rpx;
						}
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					align-items: right;

					.right_top {
						display: flex;
						flex-direction: row;
						align-items: baseline;
						margin-bottom: 2rpx;

						.color1 {
							color: #F37364;
							text-align: right;
						}

						.size1 {
							font-size: 24rpx;
							font-weight: 500;
						}

						.size2 {
							font-size: 48rpx;
							font-weight: 700;
						}

						.size3 {
							font-size: 32rpx;
							font-weight: 500;
						}
					}

					.right_bottom {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-decoration: line-through;
						color: #999999;
						text-align: right;
					}
				}
			}

			.content {
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #666666;
			}

			.row_img {
				width: 100%;
				display: flex;
				justify-content: center;

				.flow {
					width: 606rpx;
					height: 190rpx;
				}
			}

		}
	}

	.comlumn_box {
		width: 100%;
		display: flex;
		flex-direction: column;

		.Item {
			width: 100%;
			margin-bottom: 32rpx;
		}
	}

	.class_row {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;

		.item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.img {
				width: 96rpx;
				height: 96rpx;
				margin-bottom: 18rpx;
			}

			.title {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: center;
				color: #333333;
			}

			.size {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #999999;
			}
		}
	}

	.empty {
		width: 100%;
		height: 180rpx;
	}

	.on_foot-box {
		z-index: 999;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 160rpx;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(166, 179, 194, 0.30);
		display: flex;
		justify-content: center;
		padding-top: 10rpx;

		.btn {
			width: 710rpx;
			height: 88rpx;
			background: #73F0EA;
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>